import React, { useEffect, useState } from 'react'
import { Rate, Input, Button } from 'antd'
import './index.less'
import { cloneDeep } from 'lodash'
import isMobile from 'ismobilejs'
import classNames from 'classnames'
import BackHomeBtn from '../../components/backHome'

const { TextArea } = Input

const Item = (props) => {
	const { data, onChange, editable } = props
	// console.log(data)
	const isPhone = isMobile().phone

	return (
		<div>
			{isPhone && <div>{data.title}</div>}
			<div className={'itemTitleBox'}>
				{!isPhone && <span>{data.title}</span>}
				<div className={'rateBox'}>
					<Rate
						allowHalf
						onChange={(e) => {
							onChange(e, 'rate')
						}}
						style={{
							color: '#f59a23',
						}}
					/>
					<span className={'rateValue'}>{data.rateValue || 0} 分</span>
				</div>
			</div>
			{isPhone && data.label && <div className={'inputLabel'}>{data.label}</div>}
			<div className={classNames('inputBox', isPhone && 'removePadding')}>
				{!isPhone && data.label && <span className={'inputLabel'}>{data.label}</span>}
				{editable && <TextArea rows={1} className={'textarea'} onChange={onChange} value={data.value} />}
				{!editable && <div className={'disTextarea'}>{data.value}</div>}
			</div>
		</div>
	)
}

const QuestionItem = (props) => {
	const { data, currentKey, onChange, editable } = props
	const { required, title, children } = data

	return (
		<div className={'box'}>
			<div className={'title'}>
				{required && <span className={'required'}>*</span>}
				<span>{title}</span>
			</div>
			{children &&
				children.length > 0 &&
				children.map((item, index) => {
					return (
						<Item
							editable={editable}
							data={item}
							key={index}
							onChange={(e, type) => {
								onChange(e, currentKey, index, type)
							}}
						/>
					)
				})}
		</div>
	)
}

const Questionnaire = (props) => {
	const companyName = '****杭州银行实施项目'
	const initTitles = [
		{
			title: '一. 您对我公司服务项目的整体效果评价',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、项目的应用集中评价',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、对双方合作效果的感知度',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '二. 您对我公司的服务质量与态度的评价',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、人员服务态度平均（工作行为规范及工作计划时效性）',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、人员沟通协调能力平均',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '3、客户问题响应及时性',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '三. 您对我公司提供产品功能的平均',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、产品功能/性能/友好度平均',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '四. 您对我公司人月专业技能的评价',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、业务能力评价',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、技术实施能力',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '五. 您对我公司实施项目管理工作的 评价评价',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、项目经理项目管理能力',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、项目执行力评价',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '六. 您对我公司实施过程效果的评价',
			required: true,
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、项目培训效果与知识传授评价',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、上线后项目与需求匹配度',
					label: '说明及建议:',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
		{
			title: '七. 您对我公司其他方面的建议和意见',
			required: false,
			field: 'first',
			message: '请填写评价',
			validate: false,
			children: [
				{
					title: '1、产品方面',
					label: '',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '2、销售/售前方面',
					label: '',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '3、开发/测试方面',
					label: '',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '4、需求方面',
					label: '',
					rate: true,
					rateValue: null,
					value: null,
				},
				{
					title: '5、项目经理方面',
					label: '',
					rate: true,
					rateValue: null,
					value: null,
				},
			],
		},
	]

	const [titles, setTitles] = useState(initTitles)
	const [averageRate, setAverageRate] = useState(null)
	const [editable, setEditable] = useState(false)

	useEffect(() => {
		const totalRate = titles.reduce((total, prev) => {
			const childRates = prev.children.reduce((t, i) => {
				return t + i.rateValue
			}, 0)
			return total + childRates
		}, 0)

		const totalNum = titles.reduce((total, prev) => {
			return total + prev.children.length
		}, 0)

		const average = (totalRate / totalNum).toFixed(1)

		setAverageRate(average)
	}, [titles])

	const onChange = (e, parentKey, key, type) => {
		const targetList = cloneDeep(titles)
		const target = targetList[parentKey].children[key]
		if (type === 'rate') {
			target.rateValue = e * 2
		} else {
			target.value = e.target.value
		}
		setTitles(() => targetList)
	}

	const handleSubmit = () => {
		const validate = titles.every((item) => {
			const flag = item.children.every((i, t) => {
				return !!(i.rateValue && i.value)
			})
			item.validate = flag
			if (item.required) {
				return flag
			}
			return true
		})
		console.log(validate)
		console.log(titles)
	}

	const changeEditable = () => {
		setEditable(!editable)
	}

	return (
		<div className={'questionContainer'}>
			<BackHomeBtn />
			<p className={'questionTitle'}>客户满意度调查问卷</p>
			<div>
				<p>尊敬的客户，您好！</p>
				<p>
					为加强贵公司与我公司的合作，不断改进和完善项目实施过程及服务质量，特向贵公司发出《客户满意度调查表》，请您将贵公司的宝贵意见及建议反馈给我们，以便于我们根据您的期望持续改进。衷心感谢您的反馈！
				</p>
			</div>

			<p className={'companyName'}>项目名称: {companyName}</p>
			<p className={'evaluationTip'}>评价内容（每项评分10分进行打分）</p>
			<div>
				{titles &&
					titles.length > 0 &&
					titles.map((item, index) => (
						<QuestionItem data={item} key={index} currentKey={index} onChange={onChange} editable={editable} />
					))}
			</div>
			<p>综合评分: {averageRate}分</p>
			<div className={'questionBtnBox'}>
				<Button onClick={handleSubmit} type={'primary'} className={'submitBtn'}>
					提交
				</Button>
				<Button onClick={changeEditable}>取消</Button>
			</div>
		</div>
	)
}

export default Questionnaire
